<script setup lang="ts">
import { defineEmits, useAttrs } from 'vue';
import _ from 'lodash';
import { IOptionItem } from 'xcore/cmpnt';

const emit = defineEmits(['change']);
const attrs = useAttrs();


function filterOptions(options: IOptionItem[], groups: string[]): IOptionItem[] {
    return options.filter(option => option.group && groups.includes(option.group));
}

// 过滤options
const defClassGroup = attrs._ClassGroup as string[];
const options = filterOptions(attrs.options as IOptionItem[], (attrs._allowGroups as string[]) || defClassGroup);



const moduleValues = attrs.modelValue as string[];
options.forEach(item => {
    if (item.children) {
        const childValueInInput = item.children.find(child => moduleValues.includes(child.value)) || { value: "" };
        item.value = childValueInInput.value;

    }
});



const onChange = () => {
    let options = attrs.options as IOptionItem[]
    const values = options.map(item => item.value);
    const flattenedValues = _.flattenDeep(values);
    const filteredValues = flattenedValues.filter(value => value !== '');
    emit('change', filteredValues);
};
</script>

<template>
    <div class="te-class-select d-inline-block">
        <el-row :gutter="6">
            <el-col class="my-1" :span="12" v-for="item in options" :key="item">
                <el-select :placeholder="item.label" @change="onChange" clearable :filterable="true"
                    v-model="item.value">
                    <el-option v-for="vitem in item.children" :key="vitem.value" :label="vitem.label"
                        :value="vitem.value" />
                </el-select>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
.te-class-select {
    overflow: hidden;
    min-width: 220px;
}
</style>